<template>
  <div class="cat">
    <!-- 轮播图 -->
    <div class="catBanner">
      <!-- banner部分开始 -->
      <!-- ref:用于把变量和元素绑定 -->
      <swiper class="swiper" :options="swiperOption" ref="mySwiper">
        <!-- 1. banner图片 -->
        <swiper-slide v-for="ban in banner" :key="ban.cid">
          <!-- ban.href的值product_details.html?lid=28 -->
          <!-- split('?')差分成两个数组 以？做相隔符-->
          <!-- 通过[1]读取lid=28详见视频10.30分 -->
          <!-- :to="`/pdetails?${ban.href.split('?')[1]}`" -->
          <!-- <router-link > -->
          <!-- <img :src="imgBase + ban.img" alt="" /> -->
          <img :src="`${ban.img}`" alt="">
          <!-- </router-link> -->
          <!-- <router-view /> -->
        </swiper-slide>

        <!-- 2. banner页数的指示点 -->
        <div class="swiper-pagination" slot="pagination"></div>

      </swiper>
    </div>
    <!-- 列表 -->
    <div class="catItem">
      <!-- 列表猫咪信息 -->
      <div catMsg>
        <!-- 名称 -->
        <div>
          <h1>汤圆</h1>
        </div>
        <!-- 年龄 -->
        <div>
          <b>1岁</b>
          <b>妹妹</b>

          <span>亲人</span>
          <span>|</span>
          <span>活泼</span>
          <span>|</span>
          <span>聪明</span>
        </div>
        <!-- 类型 -->
        <div class="cat-features">
          <ul class="flex">
            <li>
              <van-icon name="filter-o" />
              <h1>已免疫</h1>
            </li>
            <li>
              <van-icon name="filter-o" />
              <h1>已免疫</h1>
            </li>
            <li>
              <van-icon name="filter-o" />
              <h1>已免疫</h1>
            </li>
            <li>
              <van-icon name="filter-o" />
              <h1>已免疫</h1>
            </li>
          </ul>
        </div>
        <!-- 地区 -->
        <div>
          <span>北京市朝阳区</span>
          <span>浏览416</span>
          <span>刷新</span>
          <span>2022-04-12</span>
        </div>
      </div>
      <!-- TA的故事 -->
      <div>
        <div>
          <h1>TA的故事</h1>
        </div>
        <div>
          <span>白色是汤圆</span>
        </div>
        <div>
          <span>√在北京的</span>
        </div>
      </div>
      <!-- 送养人信息 -->
      <div>
        <div>
          <h1>送养人信息</h1>
        </div>
        <div>
          
        </div>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      banner: [
        { id: 1, img: require('../../assets/images/banner1.png') },
        { id: 2, img: require('../../assets/images/banner2.png') },
        { id: 3, img: require('../../assets/images/banner3.png') },
        { id: 4, img: require('../../assets/images/banner4.png') },
        { id: 5, img: require('../../assets/images/banner5.png') },
        { id: 6, img: require('../../assets/images/banner6.png') },
        { id: 7, img: require('../../assets/images/banner7.png') },
      ],
      dataAll: null,

      // 配置项:可以对轮播图组件进行精确配置
      swiperOption: {
        // 特效:cube立方体,coverflow;fade;flip;cards
        effect: "cards",
        loop: true, //循环滚动,如果到最后一张继续开始第一张
        // autoplay: true, //自动切换
        autoplay: {
          // delay: 1000, //设置切换时间间隔
          disableOnInteraction: false, //用户操作后,是否停止自动滚动
          // pauseOnMouseEnter: true, //鼠标放在轮播图上面,暂停在此图片注意:6以下版本不支持
        },

        // 页数点
        pagination: {
          el: ".swiper-pagination",
          clickable: true, //点击小圆点切换
        },

      },
    }
  },
}
</script>

<style lang="scss">
// 修改子组件中的样式,不能有scoped属性
// 修改banner小⚪点大小
.swiper-pagination-bullet {
  width: 20px;
  height: 5px;
}

:root {
  --swiper-theme-color: #EF8C89
}

.swiper-pagination-bullets {
  margin-bottom: 1rem;
}

.swiper-pagination-bullet {
  border-radius: 0;
}
</style>
<style lang="scss" scoped>
.cat {
  position: relative;
  top: 0;
}

.swiper {

  // width: 340px;
  // margin: 10px auto;
  img {
    width: 100vw;
    height: 50vh;
  }
}

.catItem {
  width: 100%;
  height: 50vh;
  border-radius: 20px;
  position: absolute;
  top: 48vh;
  z-index: 1;
  background-color: #fff;
  padding: 1rem;

  .cat-features {
    padding: 1rem 0;

    ul {
      justify-content: space-between;

      li {
        color: #8D73EC;
        text-align: center;
        padding: 1rem 0.5rem;
        background-color: #F7F6F9;

        h1 {
          margin-top: 0.5rem;
        }
      }
    }
  }
}
</style>